<template>
  <div class="info-wrap">
    <Title title="分成信息" style="font-size:16px; margin:22px 0 8px 0"/>
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage?'left':'right'"
      label-width="110px"
      class="supplier-form height55">
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <el-col :span="8">
          <el-form-item label="分成说明：" style="margin-bottom: 0px;">
            <ToolTip :content="detailInfo.morePriceInfo.profitSharingRemark"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="分成比例：" style="margin-bottom: 0px;">
            <div v-if="detailInfo.morePriceInfo.profitSharingRatio || detailInfo.morePriceInfo.profitSharingRatio === 0" class="shareRatio">
              <span>公司：{{ `${detailInfo.morePriceInfo.profitSharingRatio}%` }}，</span><span>达人：{{ `${math.subtract(100, detailInfo.morePriceInfo.profitSharingRatio)}%` }}</span>
            </div>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保底说明：" style="margin-bottom: 0px;">
            <ToolTip :content="detailInfo.morePriceInfo.guaranteeRemark"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保底金额(元)：" style="margin-bottom: 0px;">
            <ToolTip :content="detailInfo.morePriceInfo.guaranteePrice"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import Title from '@/components/Title';
import { mapState } from 'vuex';
import mixins from './mixins';
import math from '@/utils/math';

export default {
  components: {
    Title
  },
  mixins: [mixins],
  props: {
    detailInfo: {// 详情信息
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      math
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  }
};
</script>
<style lang="scss" scoped>
.shareRatio {
  display: flex;
  flex-wrap: wrap;
}
</style>
